import { StyleSheet, Text, Pressable, View } from 'react-native'
import { common } from '../../assets/style/common'
import { observer } from 'mobx-react-lite'
import { useStore } from '../../store'
import { useContext } from 'react'
import { NavigationContext } from '@react-navigation/native'
import { VideoInfo } from '@/store/videoSwiper'

interface VideoMenuProps {
  showCommetIcon?: boolean
  theme?: 'white' | 'black'
  videoInfo?: VideoInfo
}
export default observer(function VideoMenu(props: VideoMenuProps) {
  const showCommetIcon = !!props.showCommetIcon
  const { videoSwiperStore } = useStore()
  const videoInfo = props.videoInfo || videoSwiperStore.currentVideo
  const color = props.theme === 'black' ? '#333' : '#fff'
  const navigation = useContext(NavigationContext)
  function onLikePress() {
    videoInfo?.id && videoSwiperStore.setVideoLike(videoInfo.id)
  }
  function onCommentPress() {
    navigation?.navigate('VideoCommentList')
    !videoSwiperStore.showCommentPage &&
      videoSwiperStore.setShowCommentPage(true)
  }
  return (
    <View style={[common.flexCol, style.btnWrap]}>
      <View
        style={[
          common.flexCol,
          style.inputBtn,
          {
            backgroundColor: props.theme === 'black' ? '#fff' : '#444',
          },
        ]}
      >
        <Text style={style.pencilIcon}>&#xe7c5;</Text>
        <Text style={style.pencilTxt} numberOfLines={1}>
          妙语超欢迎，友善要躬行
        </Text>
      </View>
      <Pressable style={style.footBtn} onPress={onLikePress}>
        {/* 点赞 */}
        <Text
          style={[
            style.footIcon,
            {
              color: videoInfo?.meLike ? '#f392a6' : color,
            },
          ]}
        >
          &#x1018e;
        </Text>
        <Text
          style={[
            style.footBtnCount,
            { color: videoInfo?.meLike ? '#f392a6' : color },
          ]}
        >
          {videoInfo?.like || 0}
        </Text>
      </Pressable>
      <Pressable style={style.footBtn}>
        {/* 收藏 */}
        <Text style={[style.footIcon, { color }]}>&#x10186;</Text>
        <Text style={[style.footBtnCount, { color }]}>
          {videoInfo?.collect || 0}
        </Text>
      </Pressable>
      <Pressable style={style.footBtn}>
        {/* 转发 */}
        <Text style={[style.footIcon, { color }]}>&#xe662;</Text>
        <Text style={[style.footBtnCount, { color }]}>
          {videoInfo?.share || 0}
        </Text>
      </Pressable>
      {showCommetIcon && (
        <Pressable style={style.footBtn} onPress={onCommentPress}>
          {/* 评论 */}
          <Text style={[style.footIcon, { color }]}>&#x1018c;</Text>
          <Text style={[style.footBtnCount, { color }]}>
            {videoInfo?.comment || 0}
          </Text>
        </Pressable>
      )}
    </View>
  )
})

const style = StyleSheet.create({
  pencilIcon: {
    fontFamily: 'iconfont',
    color: '#999',
    paddingRight: 4,
    fontSize: 18,
  },
  pencilTxt: {
    fontSize: 14,
    color: '#999',
  },
  footBtn: {
    display: 'flex',
    justifyContent: 'center',
    marginLeft: 24,
    marginRight: 'auto',
  },
  inputBtn: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingVertical: 6,
    backgroundColor: '#444',
    borderRadius: 16,
    borderColor: '#999',
    borderWidth: 1,
    maxWidth: 210,
    marginRight: 'auto',
  },
  footIcon: {
    fontSize: 26,
    color: '#fff',
    fontFamily: 'iconfont',
    paddingBottom: 2,
  },
  footBtnCount: {
    fontSize: 16,
    textAlign: 'center',
    color: '#fff',
  },
  progress: {
    position: 'absolute',
    bottom: 3,
    height: 2,
    width: '100%',
    left: '-100%',
  },

  btnWrap: {
    width: '100%',
    height: 60,
    paddingHorizontal: 12,
  },
})
